<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>类别属性添加</title>
    <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet" type="text/css">
    <script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../../js/Tabullet.js"></script>
    <script src="../../lib/layui-v2.6.3/layui.js"></script>
    <script src="../../js/template-web.js"></script>
    <link href="../../lib/layui-v2.6.3/css/layui.css" media="all" rel="stylesheet">
    <style>
        body {
            background-color: #fafafa;
        }

        .container {
            margin: 150px auto;
        }

        #addTilter {
            width: 1169px;
            padding-top: 15px;
            padding-left: 45px;
            background-color: #FFFFFF;
            height: 100px;
            border-radius: 15px;
            position: relative;
            left: -16px;
            top: -120px;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="addTilter">
        <img height="20" loading="lazy" src="../../images/addoneKind.png" width="20">
        <span>类别规格添加</span>
        <div class="layui-form">
            <div class="layui-inline" style="position: relative;left: 200px">
                <label class="layui-form-label" style="width: 110px">类别选择：</label>
                <div class="layui-input-inline">
                    <select id="addspecsSelectID"></select>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="background-color: #FFFFFF;border-radius:10px;position: relative;top: -100px">
        <div class="col-sm-12">
            <table class="table table-hover" id="table">
                <thead>
                <tr data-tabullet-map="id">
                    <th data-tabullet-map="_index" data-tabullet-readonly="true" width="50">序号</th>
                    <th data-tabullet-map="name">顔色</th>
                    <th data-tabullet-map="level">尺码</th>
                    <th data-tabullet-type="edit" width="50">修改</th>
                    <th data-tabullet-type="delete" width="50">删除</th>
                </tr>
                </thead>
            </table>
            <button class="layui-btn" id="addBtn" style="margin-left: 40%">提交</button>
        </div>
    </div>
</div>
</body>
<script id="addspecsTemplate" type="text/template">
    <option></option>
    {{each datebate1 value}}
    {{if value.upname==null}}
    <option value="{{value.id}}">{{@value.k_name}}</option>
    {{else}}
    <option value="{{value.id}}">{{@value.upname}}/{{@value.k_name}}</option>
    {{/if}}
    {{/each}}
</script>
<script>
    layui.use("form", function () {
        var form = layui.form;
        $.get("/kind", function (result) {
            date = {datebate1: result}
            mera = template("addspecsTemplate", date);
            $("#addspecsSelectID").append(mera);
            form.render();
        })
    })
</script>
<script>
    $(function () {
        var source = [];

        function resetTabullet() {
            $("#table").tabullet({
                data: source,
                action: function (mode, data) {
                    if (mode === 'save') {
                        source.push(data);

                    }
                    if (mode === 'edit') {
                        for (var i = 0; i < source.length; i++) {
                            if (source[i].id == data.id) {
                                source[i] = data;
                            }
                        }
                    }
                    if (mode == 'delete') {
                        for (var i = 0; i < source.length; i++) {
                            if (source[i].id == data) {
                                source.splice(i, 1);
                                break;
                            }
                        }
                    }
                    resetTabullet();
                }
            });
        }

        resetTabullet();
        $("#addBtn").on('click', function () {
            var kindId = $("#addspecsSelectID").val()
            var result = {};
            var data = [];
            for (var i = 0; i < source.length; i++) {
                result = {};
                result['name'] = source[i]['name']
                result['level'] = source[i]['level']
                result['k_id'] = kindId
                data.push(result)
            }
            console.log(JSON.stringify(result))

            if (kindId == "") {
                layer.msg("类别不能为空")
            } else {
                console.log(result);
                $.ajax({
                    type: "post",
                    dataType: "json",
                    url: "/addSpecsData",
                    data: {"data": JSON.stringify(data)},
                    success: function (data) {
                        if (data == "ok") {
                            layer.msg('添加成功')
                        }
                    }
                });
            }
        })
    });
</script>
</html>
